<template>
	<div class="body" style="background-color:#f2f4f7 ;">
		<!-- 顶部 -->
		<div class="top">
			<div class="" style="color: #0087F7;" @click="refresh" v-if="getMyRouter() == 0">
				<i class="el-icon-refresh"></i>
				刷新
			</div>

			<div class="" @click="tuchBack" v-if="getMyRouter() == 1">
				<i class="el-icon-back"></i>
				返回
			</div>

			<div class="" style="display: flex;align-items: center;">
				<div class="topIN">
					<div class="">
						<img class="headPeacher" :src="userInfo.heard">
					</div>
					<div class="down" id="downs">
						<span class="thenName">{{userInfo.name}}</span>
						<i class="el-icon-arrow-down" id="downsSonOne"></i>
						<div class="inTrigger1" id="downsSon">
							<div class="">
								<span class="tehHead"><i class="el-icon-switch-button"></i></span>
								<span>退出登录</span>
							</div>
						</div>
					</div>
				</div>
				<div class=""
					style="margin-left: 16px; color: #0087F7;border-bottom: solid #0074D9 1px;padding-bottom: 1px;"
					@click="tuchOut">
					退出
				</div>
			</div>
		</div>
		<!-- end -->
		<!-- 下面内容 -->
		<div class="eaxmList">
			<router-view ref="Childmain"></router-view>
		</div>
		<!-- end -->
	</div>
</template>

<script>
	export default {
		name: 'CourseStudy',
		data() {
			return {
				current_in: '',
				userInfo: {} //用户信息
			}
		},
		methods: {
			tuchOut() {
				window.sessionStorage.clear()
				this.$router.push('examPerson')
			},
			refresh() {
				this.$refs['Childmain'].getExamList()
				this.$message({
					showClose: true,
					message: '刷新已完成',
					type: 'success'
				});
			},
			getMyRouter() {
				if (this.$route.path === '/examListContent') {
					return 0
				}
				if (this.$route.path === '/examFace') {
					return 1
				}
			},
			tuchBack() {
				this.$router.push('examListContent')
			}
		},
		created() {
			console.log(this.$route.path);
			this.userInfo = JSON.parse(sessionStorage.getItem('InfoMation'))
			// console.log(this.userInfo);
		}
	}
</script>

<style>
	.eaxmList {
		margin: 32px;
	}

	#downs:hover #downsSon {
		height: 50px;
		transition: all 0.6s;
	}

	#downs #downsSon {
		transition: all 0.6s;
	}

	#downs #downsSonOne {
		transition: all 0.6s;
	}

	#downs:hover #downsSonOne {
		transform: rotate(180deg);
		transition: all 0.6s;
	}

	.tehHead {
		color: #9aa2af;
		margin-right: 10px;
	}

	.inTrigger1 {
		height: 0px;
		overflow: hidden;
		position: absolute;
		font-size: 18px;
		right: 28px;
		top: 58px;
		z-index: 99999999;
		background-color: #FFFFFF;
		width: 160px;
		border-radius: 8px;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.inTrigger1 div {
		padding: 16px;
	}

	.inTrigger1 div:hover:nth-child(1) {
		border-radius: 8px 8px 0 0;
		background-color: #f5f8fb;
		color: #81b4fd;
	}

	.inTrigger1 div:hover:nth-child(2) {
		border-radius: 0 0 8px 8px;
		background-color: #f5f8fb;
		color: #81b4fd;
	}

	.inTrigger1 div:hover .tehHead {
		color: #81b4fd;
	}

	.myRIght {
		width: 100%;
		min-height: 80vh;
		margin-left: 20px;
		margin-left: 20px;
		margin-top: 20px;
		background-color: #FFFFFF;
		padding: 16px 0;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.noSeIn {
		justify-content: center;
		padding: 16px 0;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 18px;
		cursor: pointer;
		background: #f0f6ff;
		color: #67a2ff;
	}

	.setIN {
		margin-right: 8px;
		font-size: 26px;
		color: #acb4bf;
	}

	.setINIt {
		margin-right: 8px;
		font-size: 26px;
		color: #67a2ff;
	}

	.noSe {
		justify-content: center;
		padding: 16px 0;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 18px;
		cursor: pointer;
	}

	.courseName {
		cursor: pointer;
		width: 140px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
		font-size: 18px;
		margin-top: 8px;
	}

	.courseImg {
		height: 76px;
		width: 140px;
		border-radius: 4px;
	}

	.myCourse {
		width: 100%;
		padding: 16px;
		display: flex;
		flex-direction: column;
	}

	.myLeft {
		margin-top: 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		width: 180px;
		border-radius: 0 7px 7px 0;
		top: 60px;
		background-color: #FFFFFF;
		padding-bottom: 20px;
		min-height: 88vh;
	}

	.underContent {
		/* margin-top: 1px; */
		width: auto;
		margin-right: 30px;
		/* background-color: #f9fafb; */
		display: flex;
	}

	.down {
		color: gray;
		transition: all 0.6s;
	}

	.down:hover {
		/* transition: all 0.6s;
  transform: rotate(180deg); */
	}

	.thenName {
		margin: 0 8px 0 24px;
	}

	.topIN {
		display: flex;
		align-items: center;
	}

	.headPeacher {
		margin-top: 5px;
		width: 28px;
		height: 28px;
		border-radius: 50%;
	}

	.top {
		width: auto;
		padding: 10px 30px;
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		display: flex;
		justify-content: space-between;
		font-size: 20px;
		align-items: center;
		cursor: pointer;
		z-index: 9;
	}

	.body {
		height: 100vh;
	}
</style>
